<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="newTodo" v-on:keyup.enter="addTodo">
        <ul>
            <li v-for="i in list">
                <span>{{i.text}}</span>
                <button type="button" v-on:click="removeTodo($index)">X</button>
            </li>
        </ul>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        /*
        * vue.js实现一个新建信息更新到列表中，删除选中行的小功能
        * v-on:keyup.enter：当按键盘"enter"时，进行addTodo操作
        * v-on:click 单击"x"时删除当前行
        * */
        new Vue({
            el : "#app",
            data : {
                newTodo : '',
                list : [
                    {text : 'hello vue.js'}
                ]
            },
            methods : {
                addTodo : function(){
                    console.log(this);
                    var text = this.newTodo.trim();
                    if(text){
                        this.list.push({text : this.newTodo});
                        this.newTodo = "";
                    }
                },
                removeTodo : function($index){
                    console.dir($index)
                    this.list.splice($index,1);
                }
            }
        })
    </script>
</body>
</html>